<template>
  <el-table
    :data="tableData"
    border
    max-height="540"
    style="width: 100%">
    <el-table-column
      prop="class_no"
      label="班级号">
    </el-table-column>
    <el-table-column
      prop="monitor"
      label="班长学号">
    </el-table-column>
    <el-table-column
      prop="s_name"
      label="班长姓名">
    </el-table-column>
    <el-table-column
      prop="class_teacher"
      label="教师编号">
    </el-table-column>
    <el-table-column
      prop="t_name"
      label="教师姓名">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { selectmonitorAPI, appointmonitorAPI } from '@/api/teacherAPI.js'

export default {
  name: 'Monitor',
  data () {
    return {
      tableData: []
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    // 修改班长
    handleClick (row) {
      this.$prompt('请输入新班长学号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async ({ value }) => {
        const params = {
          tno: JSON.parse(sessionStorage.getItem('token')).username,
          classno: row.class_no,
          sno: value
        }
        const { data: res } = await appointmonitorAPI(params)
        if (res.status !== 200) {
          this.$message.error(res.data.msg)
        } else {
          this.$message.success(res.data.msg)
          this.getTableData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    // 获取表格数据
    async getTableData () {
      const { data: res } = await selectmonitorAPI()
      if (res.status !== 200) return this.$message.error(res.data.msg)
      this.tableData = res.data
    }
  }
}
</script>

<style>

</style>
